<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{
        margin:0;
        padding:0;
    }
    ul {
        list-style: none;
        position: absolute;
        top:0;
        left:0;
    }
    ul li{
        float:left;
    }
    #silder1{
        width:500px;
        height:200px;
        overflow: hidden;
        position: relative;
    }
    #silder2{
        width:500px;
        height:200px;
        overflow: hidden;
        position: relative;
        margin-top: 20px;
    }
    #silder3{
        width:500px;
        height:200px;
        overflow: hidden;
        position: relative;
        margin-top: 20px
    }
    #num{
        position: absolute;
        bottom:20px;
        right:20px;
    }
    #num span{
        display: inline-block;
        width:30px;
        height:30px;
        line-height: 30px;
        background-color: #ccc;
        opacity: 0.8;
        color:#fff;
        margin-right: 20px;
        text-align: center;

    }
    #num span.active{
        opacity: 1;
	background: #1D5D76;
    }
    .left{
	width:56px;
	height: 87px;
	position: absolute;
	left:10px;
	top:57px;
	background: url('./images/left-arrow.png');
}
.right{
	width:56px;
	height: 87px;
	position: absolute;
	right:10px;
	top:57px;
	background: url('./images/right-arrow.png');
}
    </style>
</head>
<body>
    <div id="silder1">
        <ul>
            <li><img src="./images/1.jpg"></li>
            <li><img src="./images/2.jpg"></li>
            <li><img src="./images/3.jpg"></li>
            <li><img src="./images/4.jpg"></li>
        </ul>
    </div>

    <div id="silder2">
            <ul>
                <li><img src="./images/1.jpg"></li>
                <li><img src="./images/2.jpg"></li>
                <li><img src="./images/3.jpg"></li>
                <li><img src="./images/4.jpg"></li>
            </ul>
        </div>

        <div id="silder3">
                <ul>
                    <li><img src="./images/1.jpg"></li>
                    <li><img src="./images/2.jpg"></li>
                    <li><img src="./images/3.jpg"></li>
                    <li><img src="./images/4.jpg"></li>
                </ul>
            </div>
            <script src="js/jquery1.7.js"></script>
            <script src="js/jq-silder.js"></script>
            <script >
            $("#silder1").silder();
            $("#silder2").silder({
                numControl:true
            });
            $("#silder3").silder({
                numControl:true,
                arrowControl:true
            });

            
            </script>
</body>
</html>